import QtQuick 1.0
import "../models"
//import "../js/main.js" as MainManager

Rectangle {
    id: productItem
    width: parent.width
    height: 60
    color: "#0D1B1E26"

    property int itemId
    property int itemIndex
    property int listID
    property alias checkState: productItem.state
    property alias name: productItemNameText.text
    //property alias price: productPriceText.text
    //property alias currency: productCurrencyText.text
    property alias quantity: productQuantityText.text
    property int mu

    states: [
        State {
            name: "1"
            PropertyChanges { target: productItem; color: "#33b6d051" }
            PropertyChanges { target: productCheckImage; source: "../images/icon_check_active.png" }
            PropertyChanges { target: productItemNameText; font.strikeout: true }
        },
        State {
            name: "0"
            PropertyChanges { target: productItem; color: "#0D1B1E26" }
            PropertyChanges { target: productCheckImage; source: "../images/icon_check.png" }
            PropertyChanges { target: productItemNameText; font.strikeout: false }
        }
    ]

    MetricItemsModel {
        id: metricModel
    }

    ImperialItemsModel {
        id: imperialModel
    }

    transitions: [
        Transition {
            ColorAnimation { duration: 100 }
        }
    ]

    Rectangle {
        id: listItemSeparator
        width: parent.width
        height: 1
        anchors.bottom: parent.bottom
        x: 0
        color: "#d2d2d2"
    }


    Row {
        height: 40
        spacing: 10
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.top: parent.top
        anchors.topMargin: 10

        Rectangle {
            id: productCheck
            width: 40
            height: parent.height
            color: "#00000000"

            Image {
                anchors.top: parent.top
                id: productCheckImage
                width: 40
                height: 40
                fillMode: Image.Stretch
            }
        }

        Rectangle {
            id: productItemName
            width: 160
            height: parent.height
            color: "#00000000"

            Text {
                id: productItemNameText
                anchors.fill: parent
                font.family: nokiaStandard.name
                font.pixelSize: 18
                font.strikeout: false
                color: "#393939"
                verticalAlignment: Text.AlignVCenter
                elide: Text.ElideRight
                smooth: true
            }
        }

        Rectangle {
            id: productItemQuantity
            width: 80
            height: parent.height
            color: "#00000000"

            Row {
                spacing: 5
                anchors.fill: parent
                anchors.right: parent.right

                Text {
                    id: productQuantityText
                    height: 40
                    font.family: nokiaStandard.name
                    font.pixelSize: 16
                    font.weight: Font.Light
                    color: "#3567f8"
                    verticalAlignment: Text.AlignVCenter
                    elide: Text.ElideRight
                }
                Text {
                    id: productMUtext
                    height: 40
                    font.family: nokiaStandard.name
                    font.pixelSize: 16
                    font.weight: Font.Light
                    color: "#3567f8"
                    verticalAlignment: Text.AlignVCenter
                    elide: Text.ElideRight

                    Component.onCompleted: {
                        if(mainContainer.var_metric.toLowerCase() == "metric") {
                            productMUtext.text = metricModel.get(mu-1).metricShortName;
                        } else {
                            productMUtext.text = imperialModel.get(mu-1).metricShortName;
                        }
                    }
                }

            }
        }

        Rectangle {
            id: productDelete
            width: 40
            height: parent.height
            color: "#00000000"

            Image {
                anchors.top: parent.top
                id: productDeleteImage
                width: 40
                height: 40
                fillMode: Image.Stretch
                source: "../images/icon_delete2.png"
            }
        }
    }
}
